<template>
  <div class="tmpl">

<div class="subcomtitle">

    <h4>提交评价</h4>  
    

</div>
<div>
    <textarea ref="postcontent" class="subarea" placeholder="请输入"></textarea>
    <mt-button type="primary" size="large" @click="postcomment">发布评论</mt-button>
</div>

<div class="comtitle">
    <h4>评论列表</h4>
    
</div>
<div class="comlist" v-for="item in comments">

 <div class="outwarp">
    <div class="comtent" v-text="item.content"></div>
    <div class="user" v-text="item.user_name"></div>
    <div class="time">{{ item.add_time | fmtdate('YYYY-MM-DD HH:mm:ss') }}</div>
 </div>
 <div class="outwarp">
    <div class="comtent" v-text="item.content"></div>
    <div class="user" v-text="item.user_name"></div>
    <div class="time">{{ item.add_time | fmtdate('YYYY-MM-DD HH:mm:ss') }}</div>
 </div>

 <div class="outwarp">
    <div class="comtent" v-text="item.content"></div>
    <div class="user" v-text="item.user_name"></div>
    <div class="time">{{ item.add_time | fmtdate('YYYY-MM-DD HH:mm:ss') }}</div>
 </div>

</div>
<mt-button class="more" type="danger" size="large" plain>加载更多</mt-button>



  </div>
</template>

<script>
//引用key
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';//引入mint-ui里的toast
export default {
 		data(){
 			return{
 				comments:[{
                     user_name:"匿名用户",
                     add_time:"2017-9-9 09:15:20",
                     content:"5星好评！好用5星好评！好用5星好评！好用5星好评！好用5星好评！好用5星好评！好用5星好评！好用5星好评！好用5星好评！好用"
                 }]
                 ,pageindex:1 //获取评论页码，默认第一页

             }
             
         }
        //  ,created(){
        //      this.getcomment(this.pageindex);
        //  }
         
         ,methods:{
            //  提交评论
            postcomment(){
                let url = common.apihost+'/api/postcomments/'+this.artid;
                let contentText = this.$refs.postcontent.value;
                //判断是否有值
                if(!contentText || contentText.trim().length <=0){
                       Toast('评论内容必须填写');
                       return;//阻止这个方法下面的代码继续运行
                }

                this.$http.post(url,{content:contentText},{cmulateJSON:true})
                .then(res=>{
                    // 利用mint-ui中的Toast 提示用户提交成功
                    Toast('评论成功');
                    this.getcomment(this.pageindex);//重新加载一次评价
                    his.$refs.postcontent.value = '';//清空文本值

                },res=>{console.log('评论失败')});
            },
            // 获取评论
            getcomment(pageindex,isreload){
                let url =apihost.apihost+ '/api/getcomments/'+ this.artid +'?pageindex='+pageindex;
                 this.$http.get(url).then(res=>{
                     //这要实现加载更多功能，要用新数据覆盖数组，追加到comment！再返回覆盖
                    // this.comments = res.body.message;
                    //这样写有可能有个问题！来不及刷新页面
                   // this.comments = tmparr.concat(res.body.message);
                  if(isreload){
                        this.comments = res.body.message;
                  }else{
                        this.comments = tmparr.concat(res.body.message);
                  }

                    },res => {
                     console.log('获取失败');
                     });
               
            },
            getmore(){
                //将pageindex加1
                this.pageindex++;
                //将自增以后的pageindex传到getcomment方法里
                this.getcomment(this.pageindex);
            }
         },
         //和轮播图那个一样意思
         props:['artid']//用了接收当前评论数据。
 		
}
</script>

<style lang="scss" scoped>
.tmpl{
    padding: 5px;
}
.subcomtitle h4 ,.comtitle h4{
  color: #f00;
}

.subcomtitle ,.comtitle{
font-weight: 700;
font-size: 21px;
border-bottom: 1px solid rgba(0,0,0,.3);
padding-bottom: 10px;
}
.subarea{
    height: 65px;
    margin: 5px 0 0 0;
    padding: 5px;
    font-size: 12px;
}
.comtitle{
    margin-top: 10px;
    padding: 10px 0;
}

.outwarp{
    border-bottom: 1px solid #ccc;
    max-height: 300px;
    clear: both;
    overflow-y:auto;
    padding: 5px;
}
.comtent{
    font-size: 12px;
color: #696969;
}
.user,.time{
    float: left;
    font-size: 12px;
    width: 50%;
    color: #0094ff;
    margin: 5px 0 0 0;
}
.user{
     text-align: left;
}
.time{
    text-align: right;
}
.more{
    margin-top: 10px;
}
</style>
